<template>
  <!-- 租金付款周期(月付) -->
  <div>
    <el-input
      :placeholder="$t('请输入租金付款周期(月付)')"
      :disabled="readonly || rentPayType != 2"
      @change="changeData"
      v-model="checkedData"
    ></el-input>
  </div>
</template>
<script>
import nonStandardService from '@/services/nonStandardService'
import eventBus from '@/assets/utils/eventBus.js'
export default {
  name: 'rentPaymentCycle',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: [Object, String],
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
    currentForm: {
      type: Object,
      default: () => {},
    },
    pageType: String,
  },
  data() {
    return {
      checkedData: '',
      readonly: false,
      startTime: null,
      endTime: null,
      rentPayType: null,
      rules: {
        checkedData: [{ validator: this.isValidator, trigger: 'blur' }],
      },
    }
  },
  created() {
    this.readonly = Boolean(this.$route.query.readonly)
    if (this.value) {
      this.setData()
    }
    eventBus.$on('startEndTimeChange', (val) => {
      if (val) {
        this.startTime = val[0]
        this.endTime = val[1]
      } else {
        this.startTime = null
        this.endTime = null
      }
    })
    eventBus.$on('rentPayTypeChange', (val) => {
      this.rentPayType = val
      if (val == 2) {
        this.$emit('setrules', this.parameter, {
          [this.parameter.parameterNumber]: this.rules.checkedData,
        })
      }
      if (val == 1) {
        this.checkedData = ''
        this.$emit('setrules', this.parameter, {
          [this.parameter.parameterNumber]: [{ required: false }],
        })
      }
    })
  },
  methods: {
    isValidator(rule, value, callback) {
      if (this.rentPayType == 2 && !value && this.pageType != 'template') {
        callback(new Error(this.$t('请输入租金付款周期')))
        return
      } else if (value && !/^([1-9][0-9]{0,1})$/.test(value)) {
        callback(new Error(this.$t('支持两位整数')))
        return
      } else if (value && Number(value) > this.getMonthDiff()) {
        callback(new Error(this.$t('租金付款周期需小于有效期限')))
        return
      } else {
        callback()
        return
      }
    },
    getMonthDiff() {
      let diff = 0
      if (this.startTime && this.endTime) {
        // 解析日期字符串为Date对象
        const startDate = new Date(this.startTime)
        const endDate = new Date(this.endTime)
        // 获取年份和月份的差异
        let yearDiff = endDate.getFullYear() - startDate.getFullYear()
        let monthDiff = endDate.getMonth() - startDate.getMonth()
        // 如果结束月份小于开始月份，则需要从年份差异中减去1年，并加上12个月（因为每个月有30天左右的差异）
        if (monthDiff < 0) {
          yearDiff--
          monthDiff += 12
        }
        // 根据结束期限日是否晚于开始期限日设置X的值
        let x = endDate.getDate() > startDate.getDate() ? 1 : 0
        diff = yearDiff * 12 + monthDiff + x
      }
      return diff
    },
    changeData() {
      this.$emit('input', String(this.checkedData))
    },
    setData() {
      this.checkedData = JSON.parse(this.value).value
        ? JSON.parse(this.value).value
        : ''
      if (!this.readonly) {
        if (this.currentForm.startEndTime) {
          this.startTime = this.currentForm.startEndTime[0]
          this.endTime = this.currentForm.startEndTime[1]
        }
        if (this.currentForm.rentPayType) {
          this.rentPayType = this.currentForm.rentPayType
          if (this.currentForm.rentPayType == 2) {
            this.$emit('setrules', this.parameter, {
              [this.parameter.parameterNumber]: this.rules.checkedData,
            })
          }
          if (this.currentForm.rentPayType == 1) {
            this.$emit('setrules', this.parameter, {
              [this.parameter.parameterNumber]: [{ required: false }],
            })
          }
        }
      }
    },
    getData() {
      return {
        value: this.checkedData,
      }
    },
  },
}
</script>
